<template>
  <div>
    <el-dialog
      v-model="state.userVisible"
      :title="state.title"
      width="50%"
      destroy-on-close
      center
    >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="queryParams.phonenumber"
            placeholder="请输入手机号码"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleQuery"
            >搜索</el-button
          >
          <el-button size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-skeleton class="p20" :loading="state.height == 0" animated :rows="19">
        <template #default>
          <el-table
            height="300px"
            :data="state.tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              v-for="(item, index) in state.columnData"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
              <template
                v-if="item.render && item.prop == 'status'"
                #default="scope"
              >
                <DictTag
                  :values="scope.row.status"
                  :options="dict.sys_normal_disable"
                ></DictTag>
              </template>
              <template
                v-if="item.render && item.prop == 'createTime'"
                #default="scope"
              >
                {{ parseTime(scope.row.createTime) }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="paginationBox"
            v-model:currentPage="pageInfo.currentPage"
            :page-size="pageInfo.pageSize"
            :layout="pageInfo.layout"
            :page-sizes="pageInfo.pageSizes"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </template>
      </el-skeleton>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.userVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSelectUser"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { unallocatedUserList } from "/@ts/axios/urlApi/system/role";
import { ref, reactive, defineEmits, onMounted } from "vue";
import DictTag from "/@/components/DictTag/index.vue";
import formatTool from "/@ts/hooks/format";
const emit = defineEmits(["getUsers"]);


const state = reactive({
  userVisible: false,
  loading: false,
  selection: [],
  userIds: [],
  tableData: [],
  columnData: [
    {
      label: "用户名称",
      prop: "userName",
    },
    {
      label: "用户昵称",
      prop: "nickName",
    },
    {
      label: "邮箱",
      prop: "email",
    },

    {
      label: "手机",
      prop: "phonenumber",
    },
    {
      label: "状态",
      prop: "status",
      render: true,
    },
    {
      label: "创建时间",
      prop: "createTime",
      render: true,
    },
  ],
});
const show = () => {
  queryParams.roleId = props.roleId;
  state.userVisible = true;
  resetQuery();
  getList();
};
const hide = () => {
  state.userVisible = false;
};
defineExpose({
  show,
  hide,
});
const queryFormInit = {
  pageNum: 1,
  pageSize: 10,
  userName: "",
  phonenumber: "",
};
const queryParams = reactive(JSON.parse(JSON.stringify(queryFormInit)));
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};
const pageInfo = reactive({
  currentPage: 1,
  total: 10,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
  layout: "total, prev, pager, next,sizes",
});
//查询用户列表
const getList = () => {
  state.loading = true;
  queryParams.pageNum = pageInfo.currentPage;
  queryParams.pageSize = pageInfo.pageSize;

  unallocatedUserList(queryParams).then((response: any) => {
    state.tableData = response.rows;
    pageInfo.total = response.total;
    state.loading = false;
  });
};
// 多选框选中数据
const handleSelectionChange = (selection: any) => {
  state.selection = selection;
  state.userIds = selection.map((item: any) => item.userId);
};
const handleSelectUser = () => {
  emit("getUsers", {
    selection: state.selection,
    ids: state.userIds,
  });
};
const resetQuery = () => {
  // 将对象的属性复制为初始值
  Object.assign(queryParams, queryFormInit);
  handleQuery();
};
const props = defineProps({
  roleId: {
    type: [Number, String],
    required: true,
  },
});
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
  getList();
};
const handleCurrentChange = (page: number) => {
  pageInfo.currentPage = page;
  getList();
};
let dict: any = reactive({
  sys_normal_disable: [],
});
const { parseTime, getDict } = formatTool();
onMounted(async () => {
  dict.sys_normal_disable = await getDict("sys_normal_disable");
});
</script>

<style scoped lang="scss"></style>
